<template>
  <div class="index">
    <!-- 统计数据 start -->
    <section class="statistic-data">
      <el-row :gutter="24">
        <el-col :span="3">
          <div class="statistic-card">
            <el-statistic :value="out_page_view">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  访问量
                  <el-tooltip
                    effect="dark"
                    content="小程序每日用户访问量"
                    placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistic-card">
            <el-statistic :value="out_user_number">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  用户量
                  <el-tooltip
                    effect="dark"
                    content="注册的用户总数量"
                    placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="statistic-card">
            <el-statistic :value="out_order_number">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  订单量
                  <el-tooltip
                    effect="dark"
                    content="用户下单的总订单数"
                    placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="statistic-card">
            <el-statistic :value="out_earnings_total">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  收益量
                  <el-tooltip effect="dark" content="总利润量" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="statistic-card">
            <el-statistic :value="out_earnings_today">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  今日收益
                  <el-tooltip
                    effect="dark"
                    content="今日总利润"
                    placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>相比昨日</span>
                <span class="green">
                  16%
                  <el-icon>
                    <CaretTop />
                  </el-icon>
                </span>
              </div>
              <div class="footer-item">
                <el-icon :size="14">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="statistic-card">
            <el-statistic :value="out_earnings_month">
              <template #title>
                <div style="display: inline-flex; align-items: center;">
                  本月收益
                  <el-tooltip
                    effect="dark"
                    content="本月总利润"
                    placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>相比上月</span>
                <span class="green">
                  16%
                  <el-icon>
                    <CaretTop />
                  </el-icon>
                </span>
              </div>
              <div class="footer-item">
                <el-icon :size="14">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="4">
          <el-countdown format="DD [天] HH:mm:ss" :value="count_down_time">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-right: 4px" :size="12">
                  <Calendar />
                </el-icon>
                距离本月结束还有
              </div>
            </template>
          </el-countdown>
          <div class="countdown-footer">
            {{ count_down_time.format("YYYY-MM-DD") }}
          </div>
        </el-col>
      </el-row>
    </section>

    <!-- 统计数据 end -->

    <!-- 统计图 start -->
    <section class="statistic-echarts">
      <!-- 商品库存占比 -->
      <div class="left" id="left"></div>

      <!-- 商品销售量销售额柱状图 -->
      <div class="right" id="right"></div>
    </section>
    <!-- 统计图 end -->
  </div>
</template>


<script setup>
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
  Calendar,
} from "@element-plus/icons-vue";

import { ref } from "vue";
import dayjs from "dayjs";
import { useTransition } from "@vueuse/core";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  DataZoomComponent,
} from "echarts/components";
import { PieChart, BarChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

import { getGoods } from "../../ajaxServices/goods"

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  ToolboxComponent,
  GridComponent,
  DataZoomComponent,
  BarChart,
]);

const count_down_time = ref(dayjs().add(1, "month").startOf("month"));

// 访问量
const page_view = ref(0);
const out_page_view = useTransition(page_view, {
  duration: 1500,
});


// 用户量
const user_number = ref(0);
const out_user_number = useTransition(user_number, {
  duration: 1500,
});


// 订单量
const order_number = ref(0);
const out_order_number = useTransition(order_number, {
  duration: 1500,
});


// 收益量
const earnings_total = ref(0);
const out_earnings_total = useTransition(earnings_total, {
  duration: 1500,
});


// 今日收益量
const earnings_today = ref(0);
const out_earnings_today = useTransition(earnings_today, {
  duration: 1500,
});


// 本月收益
const earnings_month = ref(0);
const out_earnings_month = useTransition(earnings_month, {
  duration: 1500,
});




// 统计echarts start

// 各商品库存量饼图
const load_echarts_stock = () => {
  var chartDom = document.getElementById("left");
  var myChart = echarts.init(chartDom);
  var option;
  var data = {}

  async function genData() {
    const legendData = [];
    const goodsName = [];

    let res = await getGoods({});
    res.data.map((_) => {
      _.menu_ids = [_.menu_first_id, _.menu_second_id]
    })
    for (let item of res.data) {
      legendData.push(item.item_number);
      goodsName.push({
        name: item.item_number,
        value: item.stock
      });
    }

    return {
      legendData: legendData,
      goodsName: goodsName,
    };
  }

  genData().then((res) => {
      data = res;
        option = {
          title: {
            text: "各规格库存量",
            subtext: "最新统计",
            left: "left",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,
          },
          series: [
            {
              name: "货号",
              type: "pie",
              radius: "55%",
              center: ["40%", "50%"],
              data: data.goodsName,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };

        option && myChart.setOption(option);

  })


};

// 各商品销售额&销售量

const sell_data = {
  budget2012List: [0, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
  budget2011List: [null, 1000, 1000, 1000, 2000, 2000, 1000, 1000, 4000, 1000],
  delta: [null, 0, 0, 0, -50, null, 0, null, -75, 0],
  names: [
    "空军一号",
    "老爹鞋",
    "运动生活",
    "跑步系列",
    "NIKE",
    "Jordan",
    "W NIKE VOMERO",
    "W PEGASUS",
    "W ZOOM FLY 6",
    "W ZOOM FLY 8",
  ],
};

const load_echarts_goods_sell = () => {
  var ROOT_PATH = "https://echarts.apache.org/examples";

  var chartDom = document.getElementById("right");
  var myChart = echarts.init(chartDom);
  var option;

  myChart.showLoading();
  setTimeout(() => {
    myChart.hideLoading();
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      calculable: true,
      legend: {
        data: ["Growth", "销售量", "销售额"],
        itemGap: 5,
      },
      grid: {
        top: "12%",
        left: "1%",
        right: "10%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: sell_data.names,
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "Budget (million USD)",
          axisLabel: {
            formatter: function (a) {
              a = +a;
              return isFinite(a) ? echarts.format.addCommas(+a / 1000) : "";
            },
          },
        },
      ],
      dataZoom: [
        {
          show: true,
          start: 0,
          end: 100,
        },
        {
          type: "inside",
          start: 0,
          end: 100,
        },
        {
          show: true,
          yAxisIndex: 0,
          filterMode: "empty",
          width: 30,
          height: "80%",
          showDataShadow: false,
          left: "93%",
        },
      ],
      series: [
        {
          name: "销售量",
          type: "bar",
          data: sell_data.budget2011List,
        },
        {
          name: "销售额",
          type: "bar",
          data: sell_data.budget2012List,
        },
      ],
    };
    myChart.setOption(option);
  }, 100);

  // $.get(
  //   ROOT_PATH + "/data/asset/data/obama_budget_proposal_2012.list.json",
  //   function (obama_budget_2012) {
  //     myChart.hideLoading();
  //     option = {
  //       tooltip: {
  //         trigger: "axis",
  //         axisPointer: {
  //           type: "shadow",
  //           label: {
  //             show: true,
  //           },
  //         },
  //       },
  //       toolbox: {
  //         show: true,
  //         feature: {
  //           mark: { show: true },
  //           dataView: { show: true, readOnly: false },
  //           magicType: { show: true, type: ["line", "bar"] },
  //           restore: { show: true },
  //           saveAsImage: { show: true },
  //         },
  //       },
  //       calculable: true,
  //       legend: {
  //         data: ["Growth", "Budget 2011", "Budget 2012"],
  //         itemGap: 5,
  //       },
  //       grid: {
  //         top: "12%",
  //         left: "1%",
  //         right: "10%",
  //         containLabel: true,
  //       },
  //       xAxis: [
  //         {
  //           type: "category",
  //           data: sell_data.names,
  //         },
  //       ],
  //       yAxis: [
  //         {
  //           type: "value",
  //           name: "Budget (million USD)",
  //           axisLabel: {
  //             formatter: function (a) {
  //               a = +a;
  //               return isFinite(a) ? echarts.format.addCommas(+a / 1000) : "";
  //             },
  //           },
  //         },
  //       ],
  //       dataZoom: [
  //         {
  //           show: true,
  //           start: 94,
  //           end: 100,
  //         },
  //         {
  //           type: "inside",
  //           start: 94,
  //           end: 100,
  //         },
  //         {
  //           show: true,
  //           yAxisIndex: 0,
  //           filterMode: "empty",
  //           width: 30,
  //           height: "80%",
  //           showDataShadow: false,
  //           left: "93%",
  //         },
  //       ],
  //       series: [
  //         {
  //           name: "Budget 2011",
  //           type: "bar",
  //           data: sell_data.budget2011List,
  //         },
  //         {
  //           name: "Budget 2012",
  //           type: "bar",
  //           data: sell_data.budget2012List,
  //         },
  //       ],
  //     };
  //     myChart.setOption(option);
  //   }
  // );

  option && myChart.setOption(option);
};

setTimeout(() => {
  load_echarts_stock();
  load_echarts_goods_sell();
});
</script>

<style lang="scss">
.index {
  width: 97%;
  min-width: 1024px;
  height: 80%;
  min-height: 100px;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: auto;
  padding: 0 10px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);

  .statistic-echarts {
    width: 100%;
    height: auto;
    min-height: 550px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;

    .left {
      flex: 0.45;
    }

    .right {
      flex: 0.55;
    }
  }
}

.el-row {
  justify-content: space-around;
  align-items: center;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

</style>